<template>
<el-container >
  <el-header style="padding:0">
    <div class="header" id="userid">
      <div class="top-head">
        <span>看装修公司中心</span>
        <span @click="exit">退出登录</span>
        <p>商家服务热线：<span>0731-83869360</span></p>
      </div>
      <div class="top-nav">
        <div class="logo" style="cursor:pointer" @click="goIndex">
          <img src="../assets/image/logo.png">
        </div>
        <div class="topnav-right">
          <img src="" alt="">
        </div>
      </div>
    </div>
  </el-header>
  <el-container class="bottom-box">
    <el-aside width="230px">
      <el-menu
      unique-opened
      :default-active="link"
      class="el-menu-vertical-demo"
      background-color="#fff"
      text-color="#646464"
      active-text-color="#409eff"
      style="text-align:left"
      router>
        <div v-for="(item, index) in menu" v-bind:key="index">
          <el-submenu v-bind:index="item.index"  v-if="item.type == 0">
            <template slot="title">
              <i v-bind:class="item.class"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item-group v-for="(item, index) in item.submenu" v-bind:key="index">
              <el-menu-item v-bind:index="item.index">{{item.title}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-bind:index="item.index" v-if="item.type == 1">
            <i v-bind:class="item.class"></i>
            <span slot="title">{{item.title}}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-aside>
    <el-main>
      <div class="main-box">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import $ from 'jquery'
export default {
  data () {
    return {
      link: '',
      menu: [
        {
          type: 0,
          index: '5',
          class: 'el-icon-document',
          title: '公司简介',
          submenu: [
            { index: 'inforList', title: '公司详情' },
            { index: 'inforAdd', title: '公司详情新增/修改' }
          ]
        },
        {
          type: 0,
          index: '9',
          class: 'el-icon-rank',
          title: '设计师',
          submenu: [
            { index: 'desigList', title: '设计师列表' },
            { index: 'desigAdd', title: '设计师新增' }
          ]
        },
        {
          type: 0,
          index: '7',
          class: 'el-icon-edit-outline',
          title: '设计方案',
          submenu: [
            { index: 'caseList', title: '方案列表' },
            { index: 'caseAdd', title: '新增方案' }
          ]
        },
        {
          type: 0,
          index: '11',
          class: 'el-icon-menu',
          title: '店铺管理',
          submenu: [
            { index: 'shopList', title: '店铺首页' },
            { index: 'shopAdd', title: '店铺设置' }
          ]
        },
        {
          type: 1,
          index: 'orderList',
          class: 'el-icon-news',
          title: '订单管理'
        },
        {
          type: 1,
          index: 'modifyPassword',
          class: 'el-icon-setting',
          title: '修改密码'
        }
      ]
    }
  },
  methods: {
    exit: function () {
      var that = this
      $.ajax({
        url: that.$axios.gp + '/Account/LoginOut',
        type: 'get',
        dataType: 'jsonp',
        xhrFields: {
          withCredentials: true
        },
        success: function (data) {
          if (data.code === 0) {
            that.$axios.alert('退出成功', '提示', function () {
              window.location.href = that.$axios.link
            })
          }
        }
      })
    },
    goIndex: function () {
      window.location.href = this.$axios.link
    }
  },
  mounted () {
    this.link = this.$route.path.split('/')[1]
  },
  watch: {
    $route (to, from) {
      this.link = to.name
    }
  }
}
</script>

<style>
.top-box{
  width: 100%;
}
.el-menu{
  border-right: none;
}
.bottom-box{
  width: 100%;
  min-height: 100%;
  position: absolute;
  padding-top: 106px;
}
.el-header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0!important;
  z-index: 20;
}
.header{
  width: 100%;
}
.top-head{
  height: 35px;
  background: #f2f2f2;
  color: #646464;
  font-size: 12px;
}
.top-head>span{
  float: left;
  line-height: 35px;
  margin-left: 30px;
  cursor: pointer;
}
.top-head>p{
  float: right;
  line-height: 35px;
  margin-right: 30px;
}
.top-head>p span{
  color: #ff3000;
}
.top-nav{
  height: 70px;
  background: #fff;
  border-bottom: #dbdbdb solid 1px;
}
.el-aside{
  background: #fff;
}
.el-menu{
  height: 100%;
}
.wrap-rightbox{
  width: 100%;
  padding-left: 230px;
}
.logo{
  width: 205px;
  height: 70px;
  float: left;
}
.logo h1{
  height: 24px;
  font-size: 22px;
  line-height: 70px;
  color: #f00;
  padding-left: 22px;
  font-weight: normal;
  position: relative;
}
.logo img{
  width: 150px;
  margin: 10px 0 0 30px; 
}
.topnav-right{
  float: right;
  width: 320px;
  height: 48px;
  margin-right: 30px;
  margin-top: 11px;
}
.el-main{
  background: #fafafa;
}
</style>
